<template>
<!--   '2', 'good' 设置默认展开的菜单项-->
    <el-menu :default-openeds="['2', 'good']" style="height: 100%;"
             background-color="rgb(48,65,86)"
             text-color ="#fff"
             :collapse-transition="false"
             :collapse="isCollapse"
             router
    >
<!--        侧边栏的顶部显示一个包含 logo 和标题的区域。当侧边栏折叠时，只显示 logo，而在展开状态时，同时显示 logo 和标题。-->
        <div style="height: 60px;margin-left: 30px; line-height: 60px">
            <router-link to="/manage/home">
                <img src="../resource/logo.png" style="width: 20px;position: relative; top: 4px;right: 6px">
            </router-link>
            <span slot="title" style="color: aliceblue;font-size: 20px" v-show="!isCollapse">后台管理系统</span>
        </div>
<!--        主页-->
        <el-menu-item index="/manage/home">
            <i class="el-icon-house"></i><span slot="title">主页</span>
        </el-menu-item>
<!--        前台-->
        <el-menu-item index="/">
            <i class="el-icon-house"></i><span slot="title">前台</span>
        </el-menu-item>

        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-menu"></i><span slot="title">系统管理</span>
            </template>
            <!--      用户管理-->
<!--            v-show="userGroup条件判断当为真，菜单项会显示出来-->
            <el-menu-item-group v-show="userGroup">
                <template slot="title">用户</template>
                <el-menu-item index="/manage/user" v-if="menuFlags.userMenu">用户管理</el-menu-item>
            </el-menu-item-group>

            <!--商品相关管理-->
            <el-submenu v-if="GoodGroup" index="good">
                <template slot="title">商品</template>
                <el-menu-item index="/manage/category" v-if="menuFlags.categoryMenu">商品分类管理</el-menu-item>
                <el-menu-item index="/manage/carousel" v-if="menuFlags.carouselMenu">轮播图管理</el-menu-item>
                <el-menu-item index="/manage/good" v-if="menuFlags.goodMenu">商品管理</el-menu-item>
                <el-menu-item index="/manage/order" v-if="menuFlags.orderMenu">订单管理</el-menu-item>
                <el-menu-item index="/manage/testvue" v-if="menuFlags.orderMenu">测试</el-menu-item>

            </el-submenu>

        </el-submenu>
    </el-menu>
</template>

<script>
    import request from "@/utils/request";
    //导入request模块 用于发起网络请求的工具 发送 GET、POST 请求
    //请求拦截  响应拦截等
    export default {
        name: "Aside",
        props:{
            //父组件
            isCollapse: Boolean,
        },
        data(){
            return{
                role: 'user',
                menuFlags:{
                    userMenu: false,
                    goodMenu: false,
                    carouselMenu: false,
                    orderMenu: false,
                    categoryMenu: false,
                }


            }
        },
        computed:{
            //计算属性 userGroup计算属性的值是根据menuFlags.userMenu的值确定，create钩子函数调用后端确定其值
            userGroup: function (){
                return this.menuFlags.userMenu
            },
            GoodGroup: function (){
                return this.menuFlags.goodMenu ||this.menuFlags.orderMenu || this.menuFlags.categoryMenu || this.menuFlags.carouselMenu
            },

        },
        created() {
            request.post("http://localhost:8888/role").then(res=>{
                if(res.code==='200'){
                    this.role = res.data;
                    console.log("asider，role："+this.role)
                    if(this.role === 'admin'){
                        this.menuFlags.userMenu = true
                        this.menuFlags.carouselMenu = true
                        this.menuFlags.orderMenu = true
                        this.menuFlags.categoryMenu = true
                        this.menuFlags.goodMenu = true

                    }
                    else if(this.role==='user'){

                    }
                    console.log(this.menuFlags)
                }
            })
        },


    }
</script>

<style scoped>

</style>